<template>
  <div class="uvideo-r-content">
    <div class="hot-monitor">
      <div class="monitor-top">
        <h3>设备总览</h3>
        <div class="top-aside">
          <div class="aside-side">
            <Card class="side-content" shadow="false" :padding="0">
              <div class="side-content-area">
                <div class="left-area">
                  <Icon type="ios-speedometer-outline" />
                </div>
                <div class="right-area" style="width: 64%;">
                  <div>
                    <div class="count-wrapper">
                      <p class="content-inner">
                        {{baseInfo.onlineTotal}}台
                      </p>
                    </div>
                    <p>在线设备数</p>
                  </div>
                </div>
              </div>
            </Card>
          </div>
          <div class="aside-side">
            <Card class="side-content" shadow="false" :padding="0">
              <div class="side-content-area">
                <div class="left-area bg1">
                  <Icon type="ios-close-circle-outline" />
                </div>
                <div class="right-area" style="width: 64%;">
                  <div>
                    <div class="count-wrapper">
                      <p class="content-inner">
                        {{baseInfo.offlineTotal}}台
                      </p>
                    </div>
                    <p>离线设备数</p>
                  </div>
                </div>
              </div>
            </Card>
          </div>
          <div class="aside-side">
            <Card class="side-content" shadow="false" :padding="0">
              <div class="side-content-area">
                <div class="left-area bg2">
                  <Icon type="md-notifications-outline" />
                </div>
                <div class="right-area" style="width: 64%;">
                  <div>
                    <div class="count-wrapper">
                      <p class="content-inner">
                        {{baseInfo.errorTotal}}台
                      </p>
                    </div>
                    <p>报警设备数</p>
                  </div>
                </div>
              </div>
            </Card>
          </div>
          <div class="aside-side">
            <Card class="side-content" shadow="false" :padding="0">
              <div class="side-content-area">
                <div class="left-area bg3">
                  <Icon type="ios-podium-outline" />
                </div>
                <div class="right-area" style="width: 64%;">
                  <div>
                    <div class="count-wrapper">
                      <p class="content-inner">
                        {{baseInfo.normalTotal}}台
                      </p>
                    </div>
                    <p>正常设备数</p>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
      <div class="monitor-middle">
        <h3>报警事件</h3>
        <div class="middle-aside">
          <div class="aside-table">
            <Table size="small" :columns="columnsOfAlarm" :data="tableDatasOfAlarm"></Table>
          </div>
          <div class="aside-page">
            <!-- 分页 -->
            <Col class="panel page-panel" :span="24" style="margin-bottom: 10px;">
            <Page :total="alarmPageInfo.total" show-total :current.sync="alarmPageInfo.page" class="fr" @on-change="switchThePagingOfAlarm" :page-size="5"></Page>
            </Col>
          </div>
        </div>
      </div>
      <div class="monitor-bottom">
        <h3>监控列表</h3>
        <div class="bottom-aside">
          <div class="aside-table">
            <Table border :columns="columns" :data="tableData"></Table>
          </div>
          <div class="aside-page">
            <!-- 分页 -->
            <Col class="panel page-panel" :span="24" style="margin-bottom: 10px;">
            <Page :total="pageInfo.total" show-total :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging" :page-size="5"></Page>
            </Col>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getVideoErrorData, getDisk, getVideoDeviceOverview } from '@/api'
import { columnsOfAlarm, buildColumns } from './material'
import PermissionMixin from '../PermissionMixin'
export default {
  mixins: [PermissionMixin],
  mounted() {
    this.getInitialState()
  },
  data() {
    const vm = this
    return {
      params: {
        companyId: ''
      },
      columns: buildColumns(vm),
      columnsOfAlarm: columnsOfAlarm(vm),
      tableDatasOfAlarm: [],
      tableData: [],
      baseInfo: {},
      pageInfo: {
        total: 0,
        page: 1,
        loading: false
      },
      alarmPageInfo: {
        total: 0,
        page: 1
      }
    }
  },
  methods: {
    getInitialState() {
      this._getVideoErrorData()
      this._getDisk()
      this.getIndexInfo()
    },

    getIndexInfo() {
      const vm = this
      const params = {
        companyId: vm.companyId
      }
      getVideoDeviceOverview(params).then(res => {
        if (res.code == 200) {
          vm.baseInfo = res.data
        }
      })
    },

    // 报警事件列表切换分页
    switchThePagingOfAlarm(index) {
      const vm = this
      vm.alarmPageInfo.page = index
      vm._getVideoErrorData()
    },

    // 获取报警事件列表
    _getVideoErrorData() {
      const vm = this
      let params = {
        size: 5,
        page: vm.alarmPageInfo.page,
        companyId: vm.companyId
      }
      getVideoErrorData(params).then(res => {
        if (res.code == 200) {
          const { list, total } = res.data
          vm.alarmPageInfo.total = total
          vm.tableDatasOfAlarm = list
        }
      })
    },

    // 监控列表切换分页
    switchThePaging(index) {
      const vm = this
      vm.pageInfo.page = index
      vm._getDisk()
    },

    // 获取监控列表数据
    _getDisk() {
      const vm = this
      let params = {
        size: 5,
        page: vm.pageInfo.page,
        type: 2,
        companyId: vm.companyId
      }
      vm.pageInfo.loading = true
      getDisk({
        params
      }).then(res => {
        if (res.code == 200) {
          vm.tableData = res.data.list
          vm.pageInfo.total = res.data.total
          setTimeout(_ => {
            vm.pageInfo.loading = false
          }, 500)
        }
      })
    }
  }
}
</script>
